<template>
  <div class="collection-page">
    <h2 class="collection-title">收藏的位置</h2>
    <div v-if="loading" class="loading">加载中...</div>
    <ul v-else class="sites-list">
      <li 
        v-for="(site, index) in sites" 
        :key="index" 
        class="site-item" 
        @click="goToMapWithSite(site)"
      >
        <div class="site-name">{{ site.mark }}</div>
        <div class="site-coordinates">
          经度: {{ site.longitude.toFixed(6) }}, 纬度: {{ site.latitude.toFixed(6) }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'MapCollection',
  data() {
    return {
      sites: [],
      loading: true
    }
  },
  mounted() {
    this.fetchSites()
  },
  methods: {
    async fetchSites() {
      try {
        // 模拟调用接口
        const response = await this.querySite()
        this.sites = response.data
        this.loading = false
      } catch (error) {
        console.error('获取收藏位置失败:', error)
        this.loading = false
      }
    },
    
    goToMapWithSite(site) {
      // 在实际应用中，这里应该将位置信息传递给地图页面
      // 这里简化处理，直接跳转到地图页面
      this.$router.push('/')
      // 可以存储选中的位置信息，在地图页面中使用
      localStorage.setItem('selectedSite', JSON.stringify(site))
    },
    
    // 模拟API调用
    querySite() {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            data: [
              { longitude: 104.060350, latitude: 30.506681, mark: "靓丽服装店" },
              { longitude: 104.065420, latitude: 30.512345, mark: "美味餐厅" },
              { longitude: 104.055120, latitude: 30.508765, mark: "购物中心" },
              { longitude: 104.062340, latitude: 30.510987, mark: "公园" },
              { longitude: 104.058760, latitude: 30.505432, mark: "学校" }
            ]
          })
        }, 1000)
      })
    }
  }
}
</script>

<style scoped>
.collection-page {
  padding: 20px;
  background-color: white;
  height: 100vh;
  overflow-y: auto;
}

.collection-title {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}

.sites-list {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
}

.site-item {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.3s;
}

.site-item:hover {
  background-color: #f9f9f9;
}

.site-item:last-child {
  border-bottom: none;
}

.site-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}

.site-coordinates {
  font-size: 14px;
  color: #666;
}
</style>
